6 בספטמבר 2025עברית

מדריך מעמיק לשימוש ב-hook experimental_useSyncExternalStore של React לניהול יעיל ואמין של מנויים ל-store חיצוני, כולל דוגמאות ושיטות עבודה מומלצות.

שליטה במנויים ל-Store באמצעות experimental_useSyncExternalStore של React

בנוף המתפתח תמיד של פיתוח ווב, ניהול יעיל של state חיצוני הוא בעל חשיבות עליונה. React, עם פרדיגמת התכנות הדקלרטיבית שלה, מציעה כלים רבי עוצמה לטיפול ב-state של קומפוננטות. עם זאת, כאשר משלבים פתרונות ניהול state חיצוניים או ממשקי API של דפדפן שמחזיקים מנויים משלהם (כמו WebSockets, אחסון דפדפן, או אפילו פולטי אירועים מותאמים אישית), מפתחים נתקלים לעתים קרובות במורכבויות בשמירה על עץ הקומפוננטות של React מסונכרן. זה בדיוק המקום שבו ה-hook experimental_useSyncExternalStore נכנס לתמונה, ומציע פתרון חזק וביצועיסטי לניהול מנויים אלו. מדריך מקיף זה יעמיק במורכבויותיו, יתרונותיו ויישומיו המעשיים עבור קהל גלובלי.

האתגר של מנויים ל-Store חיצוני

לפני שנצלול ל-experimental_useSyncExternalStore, בואו נבין את האתגרים הנפוצים שמפתחים פוגשים בעת הרשמה ל-stores חיצוניים ביישומי React. באופן מסורתי, הדבר כלל לעתים קרובות:

ניהול מנויים ידני: מפתחים נאלצו להירשם ידנית ל-store ב-useEffect ולבטל את הרישום בפונקציית הניקוי כדי למנוע דליפות זיכרון ולהבטיח עדכוני state תקינים. גישה זו מועדת לטעויות ויכולה להוביל לבאגים עדינים.
רינדור מחדש בכל שינוי: ללא אופטימיזציה זהירה, כל שינוי קטן ב-store החיצוני יכול היה להפעיל רינדור מחדש של כל עץ הקומפוננטות, מה שמוביל לירידה בביצועים, במיוחד ביישומים מורכבים.
בעיות מקביליות: בהקשר של Concurrent React, שבו קומפוננטות עשויות לעבור רינדור ורינדור מחדש מספר פעמים במהלך אינטראקציית משתמש בודדת, ניהול עדכונים אסינכרוניים ומניעת נתונים לא עדכניים יכולים להפוך למאתגרים משמעותית. תנאי מרוץ (Race conditions) עלולים להתרחש אם המנויים אינם מטופלים בדיוק.
חווית מפתח: קוד ה-boilerplate הנדרש לניהול מנויים עלול להעמיס על הלוגיקה של הקומפוננטה, ולהפוך אותה לקשה יותר לקריאה ולתחזוקה.

דמיינו פלטפורמת מסחר אלקטרוני גלובלית המשתמשת בשירות עדכון מלאי בזמן אמת. כאשר משתמש צופה במוצר, הקומפוננטה שלו צריכה להירשם לעדכונים עבור מלאי המוצר הספציפי הזה. אם המנוי הזה לא מנוהל כראוי, ספירת מלאי לא עדכנית עלולה להיות מוצגת, מה שיוביל לחוויית משתמש גרועה. יתרה מכך, אם מספר משתמשים צופים באותו מוצר, טיפול לא יעיל במנויים עלול להעמיס על משאבי השרת ולהשפיע על ביצועי היישום באזורים שונים.

היכרות עם experimental_useSyncExternalStore

ה-hook experimental_useSyncExternalStore של React נועד לגשר על הפער בין ניהול ה-state הפנימי של React לבין stores חיצוניים מבוססי מנויים. הוא הוצג כדי לספק דרך אמינה ויעילה יותר להירשם ל-stores אלה, במיוחד בהקשר של Concurrent React. ה-hook מפשט חלק גדול ממורכבות ניהול המנויים, ומאפשר למפתחים להתמקד בלוגיקה המרכזית של היישום שלהם.

חתימת ה-hook היא כדלקמן:

const state = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

בואו נפרט כל פרמטר:

subscribe: זוהי פונקציה שמקבלת callback כארגומנט ונרשמת ל-store החיצוני. כאשר ה-state של ה-store משתנה, יש לקרוא ל-callback. פונקציה זו חייבת גם להחזיר פונקציית unsubscribe שתופעל כאשר הקומפוננטה מוסרת (unmounts) או כאשר יש צורך להקים מחדש את המנוי.
getSnapshot: זוהי פונקציה שמחזירה את הערך הנוכחי של ה-store החיצוני. React תקרא לפונקציה זו כדי לקבל את ה-state העדכני לרינדור.
getServerSnapshot (אופציונלי): פונקציה זו מספקת את תמונת המצב (snapshot) הראשונית של ה-state של ה-store בשרת. זה חיוני עבור רינדור בצד השרת (SSR) ו-hydration, ומבטיח שהצד הלקוח יציג תצוגה עקבית עם השרת. אם לא מסופק, הלקוח יניח שה-state הראשוני זהה לזה של השרת, מה שעלול להוביל לאי-התאמות ב-hydration אם לא מטפלים בכך בזהירות.

איך זה עובד מתחת למכסה המנוע

ה-hook experimental_useSyncExternalStore נועד להיות בעל ביצועים גבוהים. הוא מנהל באופן חכם רינדורים מחדש על ידי:

אצווה של עדכונים (Batching Updates): הוא מאגד עדכוני store מרובים המתרחשים בסמיכות, ומונע רינדורים מיותרים.
מניעת קריאות לא עדכניות (Preventing Stale Reads): במצב מקבילי, הוא מבטיח שה-state ש-React קוראת תמיד מעודכן, ונמנע מרינדור עם נתונים לא עדכניים גם אם מתרחשים מספר רינדורים במקביל.
ביטול רישום ממוטב (Optimized Unsubscription): הוא מטפל בתהליך ביטול הרישום באופן אמין, ומונע דליפות זיכרון.

על ידי מתן ערבויות אלו, experimental_useSyncExternalStore מפשט באופן משמעותי את עבודת המפתח ומשפר את היציבות והביצועים הכוללים של יישומים הנשענים על state חיצוני.

היתרונות של שימוש ב-experimental_useSyncExternalStore

אימוץ experimental_useSyncExternalStore מציע מספר יתרונות משכנעים:

1. ביצועים ויעילות משופרים

האופטימיזציות הפנימיות של ה-hook, כגון אצווה ומניעת קריאות לא עדכניות, מתורגמות ישירות לחוויית משתמש מהירה יותר. עבור יישומים גלובליים עם משתמשים בתנאי רשת ויכולות מכשיר משתנים, שיפור ביצועים זה הוא קריטי. לדוגמה, יישום מסחר פיננסי המשמש סוחרים בטוקיו, לונדון וניו יורק צריך להציג נתוני שוק בזמן אמת עם השהיה מינימלית. experimental_useSyncExternalStore מבטיח שרק רינדורים נחוצים מתרחשים, ושומר על היישום מגיב גם תחת שטף נתונים גבוה.

2. אמינות משופרת והפחתת באגים

ניהול מנויים ידני הוא מקור נפוץ לבאגים, במיוחד דליפות זיכרון ותנאי מרוץ. experimental_useSyncExternalStore מפשט לוגיקה זו, ומספק דרך אמינה וצפויה יותר לנהל מנויים חיצוניים. הדבר מפחית את הסבירות לשגיאות קריטיות, ומוביל ליישומים יציבים יותר. דמיינו יישום בתחום הבריאות הנשען על נתוני ניטור מטופלים בזמן אמת. כל אי-דיוק או עיכוב בתצוגת הנתונים עלול להיות בעל השלכות חמורות. האמינות המוצעת על ידי hook זה היא לא יסולא בפז בתרחישים כאלה.

3. אינטגרציה חלקה עם Concurrent React

Concurrent React מציג התנהגויות רינדור מורכבות. experimental_useSyncExternalStore נבנה מתוך מחשבה על מקביליות, ומבטיח שהמנויים ל-store החיצוני שלכם יתנהגו כראוי גם כאשר React מבצעת רינדור שניתן להפסיק. זה חיוני לבניית יישומי React מודרניים ומגיבים שיכולים להתמודד עם אינטראקציות משתמש מורכבות מבלי לקפוא.

4. חווית מפתח פשוטה יותר

על ידי כימוס לוגיקת המנוי, ה-hook מפחית את קוד ה-boilerplate שמפתחים צריכים לכתוב. הדבר מוביל לקוד קומפוננטה נקי וקל יותר לתחזוקה ולחוויית מפתח טובה יותר בסך הכל. מפתחים יכולים להשקיע פחות זמן בניפוי באגים של מנויים ויותר זמן בבניית פיצ'רים.

5. תמיכה ברינדור בצד השרת (SSR)

הפרמטר האופציונלי getServerSnapshot חיוני עבור SSR. הוא מאפשר לכם לספק את ה-state ההתחלתי של ה-store החיצוני שלכם מהשרת. זה מבטיח שה-HTML שרונדר בשרת יתאים למה שיישום ה-React בצד הלקוח ירנדר לאחר hydration, ומונע אי-התאמות ב-hydration ומשפר את הביצועים הנתפסים על ידי כך שהוא מאפשר למשתמשים לראות תוכן מוקדם יותר.

דוגמאות מעשיות ומקרי שימוש

בואו נבחן כמה תרחישים נפוצים שבהם ניתן ליישם ביעילות את experimental_useSyncExternalStore.

1. אינטגרציה עם Store גלובלי מותאם אישית

יישומים רבים משתמשים בפתרונות ניהול state מותאמים אישית או בספריות כמו Zustand, Jotai, או Valtio. ספריות אלו חושפות לעתים קרובות מתודת `subscribe`. כך תוכלו לשלב אחת מהן:

נניח שיש לכם store פשוט:


// simpleStore.js
let state = { count: 0 };
const listeners = new Set();

export const subscribe = (callback) => {
  listeners.add(callback);
  return () => {
    listeners.delete(callback);
  };
};

export const getSnapshot = () => state;

export const increment = () => {
  state = { count: state.count + 1 };
  listeners.forEach(callback => callback());
};

בקומפוננטת React שלכם:


import React, { experimental_useSyncExternalStore } from 'react';
import { subscribe, getSnapshot, increment } from './simpleStore';

function Counter() {
  const count = experimental_useSyncExternalStore(subscribe, getSnapshot);

  return (
    
      Count: {count.count}
      
    
  );
}

דוגמה זו מדגימה אינטגרציה נקייה. פונקציית subscribe מועברת ישירות, ו-getSnapshot מביא את ה-state הנוכחי. experimental_useSyncExternalStore מטפל במחזור החיים של המנוי באופן אוטומטי.

2. עבודה עם ממשקי API של דפדפן (לדוגמה, LocalStorage, SessionStorage)

אף על פי ש-localStorage ו-sessionStorage הם סינכרוניים, ניהולם יכול להיות מאתגר עם עדכונים בזמן אמת כאשר מעורבים מספר כרטיסיות או חלונות. ניתן להשתמש באירוע storage כדי ליצור מנוי.

בואו ניצור hook עזר עבור localStorage:


// useLocalStorage.js
import { experimental_useSyncExternalStore, useCallback } from 'react';

function subscribeToLocalStorage(key, callback) {
  const handleStorageChange = (event) => {
    if (event.key === key) {
      callback(event.newValue);
    }
  };

  window.addEventListener('storage', handleStorageChange);

  // ערך התחלתי
  callback(localStorage.getItem(key));

  return () => {
    window.removeEventListener('storage', handleStorageChange);
  };
}

function getLocalStorageSnapshot(key) {
  return localStorage.getItem(key);
}

export function useLocalStorage(key) {
  const subscribe = useCallback(
    (callback) => subscribeToLocalStorage(key, callback),
    [key]
  );

  const getSnapshot = useCallback(() => getLocalStorageSnapshot(key), [key]);

  return experimental_useSyncExternalStore(subscribe, getSnapshot);
}

בקומפוננטה שלכם:


import React from 'react';
import { useLocalStorage } from './useLocalStorage';

function SettingsPanel() {
  const theme = useLocalStorage('appTheme'); // למשל, 'light' או 'dark'

  // תצטרכו גם פונקציית setter, שלא תשתמש ב-useSyncExternalStore

  return (
    
      Current theme: {theme || 'default'}
      {/* פקדים לשינוי ערכת הנושא יקראו ל-localStorage.setItem() */}
    
  );
}

תבנית זו שימושית לסנכרון הגדרות או העדפות משתמש בין כרטיסיות שונות של יישום האינטרנט שלכם, במיוחד עבור משתמשים בינלאומיים שעשויים לפתוח מספר מופעים של האפליקציה שלכם.

3. הזנות נתונים בזמן אמת (WebSockets, Server-Sent Events)

עבור יישומים הנשענים על זרמי נתונים בזמן אמת, כגון יישומי צ'אט, לוחות מחוונים חיים, או פלטפורמות מסחר, experimental_useSyncExternalStore הוא התאמה טבעית.

שקלו חיבור WebSocket:


// WebSocketService.js
let socket;
let currentData = null;
const listeners = new Set();

export const connect = (url) => {
  socket = new WebSocket(url);

  socket.onopen = () => {
    console.log('WebSocket connected');
  };

  socket.onmessage = (event) => {
    currentData = JSON.parse(event.data);
    listeners.forEach(callback => callback(currentData));
  };

  socket.onerror = (error) => {
    console.error('WebSocket error:', error);
  };

  socket.onclose = () => {
    console.log('WebSocket disconnected');
  };
};

export const subscribeToWebSocket = (callback) => {
  listeners.add(callback);
  // אם נתונים כבר זמינים, קרא מיד
  if (currentData) {
    callback(currentData);
  }
  return () => {
    listeners.delete(callback);
    // נתק אופציונלית אם אין יותר מנויים
    if (listeners.size === 0) {
      // socket.close(); // החליטו על אסטרטגיית הניתוק שלכם
    }
  };
};

export const getWebSocketSnapshot = () => currentData;

export const sendMessage = (message) => {
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(message);
  }
};

בקומפוננטת React שלכם:


import React, { useEffect } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import { connect, subscribeToWebSocket, getWebSocketSnapshot, sendMessage } from './WebSocketService';

const WEBSOCKET_URL = 'wss://global-data-feed.example.com'; // דוגמה לכתובת URL גלובלית

function LiveDataFeed() {
  const data = experimental_useSyncExternalStore(
    subscribeToWebSocket,
    getWebSocketSnapshot
  );

  useEffect(() => {
    connect(WEBSOCKET_URL);
  }, []);

  const handleSend = () => {
    sendMessage(JSON.stringify({ message: 'Hello Server!' }));
  };

  return (
    
      Live Data
      {data ? (
        {JSON.stringify(data, null, 2)}
      ) : (
        Loading data...
      )}
      
    
  );
}

תבנית זו חיונית ליישומים המשרתים קהל גלובלי שבו צפויים עדכונים בזמן אמת, כגון תוצאות ספורט חיות, שערי מניות, או כלי עריכה שיתופיים. ה-hook מבטיח שהנתונים המוצגים תמיד עדכניים ושהיישום נשאר מגיב במהלך תנודות ברשת.

4. אינטגרציה עם ספריות צד שלישי

ספריות צד שלישי רבות מנהלות את ה-state הפנימי שלהן ומספקות ממשקי API למנויים. experimental_useSyncExternalStore מאפשר אינטגרציה חלקה:

ממשקי API של מיקום גיאוגרפי: הרשמה לשינויי מיקום.
כלי נגישות: הרשמה לשינויים בהעדפות משתמש (לדוגמה, גודל גופן, הגדרות ניגודיות).
ספריות תרשימים: תגובה לעדכוני נתונים בזמן אמת מ-data store פנימי של ספריית תרשימים.

המפתח הוא לזהות את מתודות ה-subscribe ו-getSnapshot (או שוות ערך) של הספרייה ולהעביר אותן ל-experimental_useSyncExternalStore.

רינדור בצד השרת (SSR) ו-Hydration

עבור יישומים הממנפים SSR, אתחול נכון של ה-state מהשרת הוא קריטי כדי למנוע רינדורים מחדש בצד הלקוח ואי-התאמות ב-hydration. הפרמטר getServerSnapshot ב-experimental_useSyncExternalStore מיועד למטרה זו.

בואו נחזור לדוגמת ה-store המותאם אישית ונוסיף תמיכה ב-SSR:


// simpleStore.js (עם SSR)
let state = { count: 0 };
const listeners = new Set();

export const subscribe = (callback) => {
  listeners.add(callback);
  return () => {
    listeners.delete(callback);
  };
};

export const getSnapshot = () => state;

// פונקציה זו תיקרא בשרת כדי לקבל את ה-state ההתחלתי
export const getServerSnapshot = () => {
  // בתרחיש SSR אמיתי, זה יביא את ה-state מהקונטקסט של רינדור השרת שלכם
  // להדגמה, נניח שהוא זהה ל-state ההתחלתי של הלקוח
  return { count: 0 }; 
};

export const increment = () => {
  state = { count: state.count + 1 };
  listeners.forEach(callback => callback());
};

בקומפוננטת React שלכם:


import React, { experimental_useSyncExternalStore } from 'react';
import { subscribe, getSnapshot, getServerSnapshot, increment } from './simpleStore';

function Counter() {
  // העבירו את getServerSnapshot עבור SSR
  const count = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  return (
    
      Count: {count.count}
      
    
  );
}

בשרת, React תקרא ל-getServerSnapshot כדי לקבל את הערך ההתחלתי. במהלך ה-hydration בצד הלקוח, React תשווה את ה-HTML שרונדר בשרת עם הפלט שרונדר בצד הלקוח. אם getServerSnapshot מספק state התחלתי מדויק, תהליך ה-hydration יהיה חלק. זה חשוב במיוחד עבור יישומים גלובליים שבהם רינדור השרת עשוי להיות מבוזר גיאוגרפית.

אתגרים עם SSR ו-`getServerSnapshot`

שליפת נתונים אסינכרונית: אם ה-state ההתחלתי של ה-store החיצוני שלכם תלוי בפעולות אסינכרוניות (לדוגמה, קריאת API בשרת), תצטרכו להבטיח שפעולות אלו יושלמו לפני רינדור הקומפוננטה המשתמשת ב-experimental_useSyncExternalStore. פריימוורקים כמו Next.js מספקים מנגנונים לטפל בכך.
עקביות: ה-state המוחזר על ידי getServerSnapshot *חייב* להיות עקבי עם ה-state שיהיה זמין בצד הלקוח מיד לאחר ה-hydration. כל אי-התאמה עלולה להוביל לשגיאות hydration.

שיקולים עבור קהל גלובלי

כאשר בונים יישומים עבור קהל גלובלי, ניהול state חיצוני ומנויים דורש מחשבה זהירה:

השהיית רשת (Latency): משתמשים באזורים שונים יחוו מהירויות רשת משתנות. אופטימיזציות ביצועים המסופקות על ידי experimental_useSyncExternalStore הן קריטיות עוד יותר בתרחישים כאלה.
אזורי זמן ונתונים בזמן אמת: יישומים המציגים נתונים רגישים לזמן (לדוגמה, לוחות זמנים לאירועים, תוצאות חיות) חייבים לטפל באזורי זמן בצורה נכונה. בעוד ש-experimental_useSyncExternalStore מתמקד בסנכרון נתונים, הנתונים עצמם צריכים להיות מודעים לאזור זמן לפני שהם מאוחסנים חיצונית.
בינאום (i18n) ולוקליזציה (l10n): העדפות משתמש לשפה, מטבע או פורמטים אזוריים עשויות להיות מאוחסנות ב-stores חיצוניים. הבטחת סנכרון אמין של העדפות אלו בין מופעים שונים של היישום היא מפתח.
תשתית שרתים: עבור SSR ותכונות זמן אמת, שקלו פריסת שרתים קרובים יותר לבסיס המשתמשים שלכם כדי למזער השהיה.

experimental_useSyncExternalStore עוזר על ידי הבטחה שללא קשר למקום שבו המשתמשים שלכם נמצאים או תנאי הרשת שלהם, יישום ה-React ישקף באופן עקבי את ה-state העדכני ביותר ממקורות הנתונים החיצוניים שלהם.

מתי לא להשתמש ב-experimental_useSyncExternalStore

אף על פי שהוא רב עוצמה, experimental_useSyncExternalStore מיועד למטרה ספציפית. בדרך כלל לא תשתמשו בו עבור:

ניהול state מקומי של קומפוננטה: עבור state פשוט בתוך קומפוננטה בודדת, ה-hooks המובנים של React, useState או useReducer, מתאימים ופשוטים יותר.
ניהול state גלובלי עבור נתונים פשוטים: אם ה-state הגלובלי שלכם הוא סטטי יחסית ואינו כרוך בתבניות מנוי מורכבות, פתרון קל יותר כמו React Context או store גלובלי בסיסי עשוי להספיק.
סנכרון בין דפדפנים ללא store מרכזי: בעוד שדוגמת אירוע ה-storage מראה סנכרון בין כרטיסיות, היא נשענת על מנגנוני דפדפן. עבור סנכרון אמיתי בין מכשירים או משתמשים, עדיין תזדקקו לשרת backend.

העתיד והיציבות של experimental_useSyncExternalStore

חשוב לזכור ש-experimental_useSyncExternalStore מסומן כרגע כ'ניסיוני' (experimental). משמעות הדבר היא שה-API שלו עשוי להשתנות לפני שהוא יהפוך לחלק יציב מ-React. בעוד שהוא נועד להיות פתרון חזק, מפתחים צריכים להיות מודעים למעמד ניסיוני זה ולהיות מוכנים לשינויים פוטנציאליים ב-API בגרסאות עתידיות של React. צוות React עובד באופן פעיל על עידון תכונות מקביליות אלו, וסביר מאוד ש-hook זה או הפשטה דומה יהפכו לחלק יציב מ-React בעתיד. מומלץ להתעדכן בתיעוד הרשמי של React.

סיכום

experimental_useSyncExternalStore הוא תוספת משמעותית למערכת ה-hooks של React, המספק דרך מתוקננת וביצועיסטית לנהל מנויים למקורות נתונים חיצוניים. על ידי הפשטת המורכבויות של ניהול מנויים ידני, הצעת תמיכה ב-SSR, ועבודה חלקה עם Concurrent React, הוא מעצים מפתחים לבנות יישומים חזקים, יעילים וקלים יותר לתחזוקה. עבור כל יישום גלובלי הנשען על נתונים בזמן אמת או משתלב עם מנגנוני state חיצוניים, הבנה ושימוש ב-hook זה יכולים להוביל לשיפורים משמעותיים בביצועים, באמינות ובחוויית המפתח. בזמן שאתם בונים עבור קהל בינלאומי מגוון, ודאו שאסטרטגיות ניהול ה-state שלכם עמידות ויעילות ככל האפשר. experimental_useSyncExternalStore הוא כלי מפתח בהשגת מטרה זו.

נקודות מרכזיות:

פישוט לוגיקת מנויים: הפשטה של מנויי useEffect ידניים וניקיונות.
הגברת ביצועים: תיהנו מהאופטימיזציות הפנימיות של React לאצווה ומניעת קריאות לא עדכניות.
הבטחת אמינות: הפחתת באגים הקשורים לדליפות זיכרון ותנאי מרוץ.
אימוץ מקביליות: בניית יישומים שעובדים בצורה חלקה עם Concurrent React.
תמיכה ב-SSR: ספקו states התחלתיים מדויקים ליישומים המרונדרים בשרת.
מוכנות גלובלית: שפרו את חוויית המשתמש על פני תנאי רשת ואזורים משתנים.

אף על פי שהוא ניסיוני, hook זה מציע הצצה רבת עוצמה לעתיד של ניהול ה-state ב-React. הישארו מעודכנים לשחרור היציב שלו ושלבו אותו במחשבה בפרויקט הגלובלי הבא שלכם!

שליטה במנויים ל-Store באמצעות experimental_useSyncExternalStore של React

האתגר של מנויים ל-Store חיצוני

היכרות עם experimental_useSyncExternalStore

איך זה עובד מתחת למכסה המנוע

היתרונות של שימוש ב-experimental_useSyncExternalStore

1. ביצועים ויעילות משופרים

2. אמינות משופרת והפחתת באגים

3. אינטגרציה חלקה עם Concurrent React

4. חווית מפתח פשוטה יותר

5. תמיכה ברינדור בצד השרת (SSR)

דוגמאות מעשיות ומקרי שימוש

1. אינטגרציה עם Store גלובלי מותאם אישית

2. עבודה עם ממשקי API של דפדפן (לדוגמה, LocalStorage, SessionStorage)

3. הזנות נתונים בזמן אמת (WebSockets, Server-Sent Events)

Live Data

4. אינטגרציה עם ספריות צד שלישי

רינדור בצד השרת (SSR) ו-Hydration

אתגרים עם SSR ו-getServerSnapshot

שיקולים עבור קהל גלובלי

מתי לא להשתמש ב-experimental_useSyncExternalStore

העתיד והיציבות של experimental_useSyncExternalStore

סיכום

אתגרים עם SSR ו-`getServerSnapshot`